<template>
  <div class="all-rel">
    <div class="all-flex-center-between all-top-handle">
      <el-button size="small" @click="clearFilter">重置所有筛选</el-button>
      <router-link to="/sms/add"><span class="all-add-btn el-icon-plus"></span></router-link>
    </div>
    <div>
      <el-table ref="myTable" :data="list" border stripe>
        <el-table-column sortable align="center" prop="id" label="模板id" width="100"></el-table-column>
        <el-table-column align="center" prop="type" label="短信类型" width="100"
          :filters="[{text: '普通短信', value: 0}, {text: '营销短信', value: 1}]"
          :filter-method="filterHandler"
        >
          <template slot-scope="scope">{{scope.row.type === 1 ? "营销短信" : "普通短信"}}</template>
        </el-table-column>
        <el-table-column align="center" prop="international" label="地域类型" width="100"
          :filters="[{text: '国内短信', value: 0}, {text: '海外短信', value: 1}]"
          :filter-method="filterHandler"
        >
          <template slot-scope="scope">{{scope.row.international === 1 ? "海外短信" : "国内短信"}}</template>
        </el-table-column>
        <el-table-column align="center" prop="text" label="模板内容" width="500"></el-table-column>
        <el-table-column align="center" prop="status" label="模板状态" width="100"
          :filters="[{text: '已通过', value: 0}, {text: '待审核', value: 1}, {text: '已拒绝', value: 2}]"
          :filter-method="filterHandler"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.status === 0">已通过</span>
            <span v-else-if="scope.row.status === 1">待审核</span>
            <span v-else-if="scope.row.status === 2">已拒绝</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="reply" label="审批信息"></el-table-column>
        <el-table-column align="center" label="操作" width="145">
          <template slot-scope="scope">
            <el-button size="mini">编辑</el-button>
            <el-button size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: []
    };
  },
  methods: {
    clearFilter() {
      this.$refs.myTable.clearFilter();
    },
    filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] === value;
    }
  },
  created(){
    const _this = this;
    this.$ajax({
      url: "Sms/smsModel",
      perfect(con) {
        _this.list = con;
      }
    });
  }
};
</script>
